<template>
  <div class="left-bar-box">
    <el-tabs :tab-position="tabPosition"
             @tab-click="handerTab">
      <el-tab-pane v-for="(item, index) in deconstructSpecs"
                   :key="index"
                   :label="item.label">
        <span v-if="item.icon"
              slot="label">
          {{ item.label }}
          <i class="el-icon-check left-check"></i>
          <div v-if="item.badge"
               class="badge-item"><el-badge :value="item.badge"
                      class="item">
            </el-badge></div>
        </span>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'LeftBarBox',
  props: {
    specs: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      tabPosition: 'right',
      tabList: [
        {
          label: '运费',
          vlaue: 'transport',
          mate: ['whole', 'divide'],
          icon: false
        },
        {
          label: '提货费',
          vlaue: 'carry',
          icon: false,
          mate: 'pick'
        },
        {
          label: '送货费',
          vlaue: 'deliver',
          icon: false,
          mate: 'deliver'
        },
        {
          label: '装货费',
          vlaue: 'load',
          icon: false,
          mate: 'load'
        },
        {
          label: '卸货费',
          vlaue: 'unload',
          icon: false,
          mate: 'unload'
        },
        {
          label: '其它费用',
          vlaue: 'other',
          icon: false,
          mate: 'other'
        }
      ]
    }
  },
  computed: {
    deconstructSpecs () {
      const { deliver, divide, load, pick, unload, whole, other } = this.specs   // eslint-disable-line
      const wholeBadge = whole?.filter(item => item.isError)
      const divideBadge = divide?.filter(item => item.isError)
      this.tabList.forEach(item => {
        let icon = null
        let badge = 0
        if (item.mate instanceof Array) {
          icon = item.mate.some(mate => eval(`${mate}.length`))
          badge = wholeBadge.length + divideBadge.length
        } else if (item.mate === 'other') {
          icon = eval(`${item.mate}.minimumFee || ${item.mate}.insuranceRate || ${item.mate}.taxRate `)
        } else {
          icon = eval(`${item.mate}.length`)
          const mateBadge = this.specs[item.mate].filter(item => item?.isError)
          badge = mateBadge.length
        }
        item.icon = icon
        item.badge = badge
      })

      return this.tabList
    }
  },
  methods: {
    handerTab (tab) {
      this.$emit('handerTab', tab.label)
    }
  }
}
</script>

<style scoped>
.left-bar-box {
  font-size: 15px !important;
  /* padding-right: 10px; */
}
.left-bar-box >>> .el-tabs__header {
  width: 130px;
}
.left-bar-box >>> .is-active {
  background-color: #fff5f1;
  transition: background-color 0.5s ease;
  /* transition: opacity 0.8s; */
  opacity: 1;
}
.left-check {
  color: #67c23a;
  font-weight: bold;
}
.badge-item {
  position: absolute;
  top: -7px;
  right: 0;
}
</style>